<template>
  <div class="box">
    <van-nav-bar
      title="宠物领养"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      z-index
    >
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
      <template #left>
        <van-icon name="revoke" size="18" @click="$router.push('/')" />
      </template>
    </van-nav-bar>
    <van-tabs color="#fff" v-model="active" class="menu-tabs" type="line">
      <van-tab title="苏振荣">
        <div class="n">
          <img src="../assets/hh.jpg" alt="" />
          <img src="../assets/hh.jpg" alt="" />
        </div>
        <div class="lj"><span>看看Ta</span></div>
      </van-tab>
      <van-tab title="苏大荣">内容 2</van-tab>
      <van-tab title="苏小荣">内容 3</van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 2,
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.n {
  padding: 15px 20px;
  display: flex;
  overflow: hidden;
  > img {
    width: 80%;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    margin-right: 20px;
  }
}
.box {
  padding: 10px 10px;
}
.lj {
  margin: 10px;
  text-align: center;
}
.lj span {
  padding: 10px 30px;
  background-color: #fd7396;
  border-radius: 10px;
  color: white;
}
.menu-tabs .van-tab--active {
  color: #ffffff; /* 字体颜色 */
  background-color: #ff8917; /* 标签背景颜色 */
  border-radius: 40px; /* 圆角标签背景 */
}
</style>
